<script setup>
import { defineProps, ref, watch } from "vue";
import { styleJson } from "./json/style";
const styleImage = ref("");
const psychologicalStyleImage = ref("");

const props = defineProps({
  styleType: {
    type: String,
    default: "",
  },

  psychologicalStyle: {
    type: String,
    default: "",
  },

  gender: {
    type: String,
    default: "女",
  },
});


watch(
  () => props.styleType,
  (newVal) => {
    styleImage.value = styleJson.find((item) => item.type === newVal)?.pic;
  },
  { deep: true, immediate: true }
);


watch(
  () => props.psychologicalStyle,
  (newVal) => {
    console.log('newVal: sssssssssssssssssssss', newVal);
    psychologicalStyleImage.value = styleJson.find(
      (item) => item.type === newVal
    )?.pic;
  },
  { deep: true, immediate: true }
);
</script>

<template>
  <view class="stylePicture">
    <!--    第一张和第二张都是9选一展示，如果一样就显示一张就行-->
    <template
      v-if="styleImage === psychologicalStyleImage && props.gender == '女'"
    >
      <image class="bottomMap" :src="styleImage" mode="widthFix"></image>
    </template>
    <template v-else>
      <template v-if="props.gender == '女'">
        <image class="bottomMap" :src="styleImage" mode="widthFix"></image>
        <view>
          <view class="psychologicalStyle">心理风格</view>
          <image
            class="bottomMap"
            :src="psychologicalStyleImage"
            mode="widthFix"
          ></image>
        </view>
      </template>
    </template>
  </view>
  <view class="">
    <image
      class="bottomMap"
      :src="'https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/bottomMap.png'"
      mode="widthFix"
    ></image>
  </view>
  <view style="padding-left: 20px; margin-top: 56px">
    注：人工智能大模型在计算中可能存在0.5%的误差。
  </view>
  <view class="reportCompleted">
    <image
      class="bottomMap"
      :src="'/static/reportCompleted.png'"
      mode="widthFix"
    ></image>
  </view>
</template>

<style scoped>
.psychologicalStyle {
  color: #031c24;
  padding-top: 23px;
  padding-bottom: 10px;
}
.stylePicture {
  padding: 20px;
}
.bottomMap {
  width: 100%;
}

.reportCompleted {
  padding: 0 20px;
  padding-bottom: 50px;
}
</style>
